<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>回调函数</h1>

<script>

    //1.函数名字可以作为参数传递
    /*
    function say (value) {
        console.log(value);
    }
    console.log(say);
    console.log(say('hi js.'));*/

    //2.回调函数
    /*
    function callbackFn(){
        console.log("我是回调函数");
    }

    function fn(callback){
        callback();
    }
    fn(callbackFn);*/


    //3.回调函数的错误用法
    /*
    function callbackFn(){
        console.log("我是回调函数");
    }

    function fn(callback){
        callback();
    }
    fn(callbackFn()); //这里函数直接指向，就不是调用回调函数了。
    *
     */

    //4.定时器就是典型的回调函数
    /*
    function callbackFn(){
        console.log("我是回调函数");
    }
    //延迟5秒后执行..
    setTimeout(callbackFn,5000);*/

    //5.回调函数带参数该如何调用
    //错误的调用方式。
    /*
    function callbackFn(i, j){
        console.log(i + j);
    }
    function fn(callback){
        callback();
    }
    fn(callbackFn);
    */

    //正确的写法
    function callbackFn(i, j){
        console.log(i + j);
    }
    function fn(callback){
        callback();
    }
    fn(function(){callbackFn(10,7)});

    //或者
    /*
    function callbackFn(i, j){
        console.log(i + j);
    }
    function fn(callback, x, y){
        callback(x,y);
    }
    fn(callbackFn,10,7);*/


    //6.回调函数的this指向问题
    /*
    var sum = 100;
    var obj = {
        sum: 10,
        fun: function () {
            console.log(this.sum);
        }
    };
    function con(callback) {
        callback(obj);
    }

    obj.fun(); //10
    con(obj.fun); //100
    */

    //当然我们可以用call或者apply和bind来改变this指向

    var sum = 100;
    var obj = {
        sum: 10,
        fun: function () {
            console.log(this.sum);
        }
    };
    function con(callback) {
        callback.apply(obj);
        //callback.call(obj);
        //callback.bind(obj)();
    }

    obj.fun();
    con(obj.fun);



</script>
</body>
</html>